<template>
  <div>
    <div class="container">
      <ul class="sign-list">
        <li :class="['item', item.signStatus === '1' ? 'signedItem' + index : '']" v-for="(item, index) in signedList" :key="index">
          <span>周{{signMapp[index]}}</span>
          <p class="item-score" v-if="item.signStatus === '1'">+{{item.score}}</p>
        </li>
      </ul>
      <div :class="[sign6State.signStatus === '1' ? 'signedItem6' : 'item6']">
        <p class="item-score" v-if="sign6State.signStatus === '1'">+{{sign6State.score}}</p>
      </div>
      <div class="tip"></div>
    </div>
  </div>
</template>

<script>

import {mapGetters} from 'vuex'

export default {
  name: 'signedList',
  data () {
    return {
      signMapp: {
        '0': '一',
        '1': '二',
        '2': '三',
        '3': '四',
        '4': '五',
        '5': '六'
      }
    }
  },
  components: {},
  computed: {
    ...mapGetters(['signedList', 'sign6State'])
  },
  methods: {},
  created () {},
  mounted () {
  }
}
</script>
<style lang='scss' scoped>
.container {
  display: flex;

  .sign-list {
    width: 324px;

    .item {
      width: 96px;
      height: 112px;
      margin: 0 12px 18px 0;
      background: url(../assets/images/sign-list.png) no-repeat;
      background-size: 100% 100%;
      float: left;
      text-align: center;
      padding-top: 6px;

      span {
        color: #fff;
        font-size: 24px;
      }

      .item-score {
        font-size: 12px;
        color: #fff;
        margin-top: 12px;
      }
    }

    .signedItem0 {
      background: url(../assets/images/signed-1.png) no-repeat;
      background-size: 100% 100%;
    }

    .signedItem1 {
      background: url(../assets/images/signed-2.png) no-repeat;
      background-size: 100% 100%;
    }

    .signedItem2 {
      background: url(../assets/images/signed-3.png) no-repeat;
      background-size: 100% 100%;
    }

    .signedItem3 {
      background: url(../assets/images/signed-4.png) no-repeat;
      background-size: 100% 100%;
    }

    .signedItem4 {
      background: url(../assets/images/signed-5.png) no-repeat;
      background-size: 100% 100%;
    }

    .signedItem5 {
      background: url(../assets/images/signed-6.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .item6 {
    width: 211px;
    height: 246px;
    background: url(../assets/images/sign-7.png) no-repeat;
    background-size: 100% 100%;
  }

  .signedItem6 {
    width: 211px;
    height: 246px;
    background: url(../assets/images/signed-7.png) no-repeat;
    background-size: 100% 100%;
    line-height: 246px;
    text-align: center;
    .item-score {
      color: #fff;
      font-size: 14px;
    }
  }
  .tip {
    width: 33px;
    height: 206px;
    margin-left: 18px;
    margin-top: 18px;
    background: url(../assets/images/tip.png) no-repeat;
    background-size: 100% 100%;
  }
}
</style>
